<template>
  <div class="outside-container">
    <div class="outSide">
      <div
        v-for="(item, index) in option"
        :key="index"
        class="cell"
        :style="{ fontSize: attr.fontSize + 'px' }"
      >
        <div
          class="cell-item"
          :style="{
            background:
              item.flag == 0
                ? activeColor
                : item.flag == 1
                ? '#FF3333'
                : 'rgba(32, 33, 35, 0.1)',
            borderColor: attr.borderColor,
          }"
        >
          <span v-if="index < 31">{{ index + 1 }}</span>
        </div>
      </div>
    </div>
    <div class="outTitle">
      <div :style="{ color: attr.fontColor }">
        <div v-if="attr.titleShow" class="header-title">安全第一 预防为主</div>

        <div class="date-box">
          <div class="item-box" v-if="attr.dateShow">
            <div class="display-center" style="font-size: 19px; color: #f8f7f3">
              <img src="../../../assets/icon_date.png" alt="" height="100%" />
              <span>时间</span>
            </div>
            <div class="year">
              <span
                class="year-show"
                style="font-size: 19px; color: #f8f7f3; line-height: 15px"
              >
                {{ showDateYear }}
              </span>
              <span :style="{ color: activeColor, fontSize: '62px' }">
                {{ showDateMonth }}
              </span>
              <div style="font-size: 19px; height: 30px; line-height: 15px">
                月
              </div>
            </div>
          </div>

          <div class="item-box" v-if="!attr.dayHidden">
            <div
              class="display-center"
              style="font-size: 19px; color: #f8f7f3; line-height: 15px"
            >
              <img src="../../../assets/icon_safety.png" alt="" height="100%" />
              <span>累计安全生产</span>
            </div>
            <span :style="{ color: activeColor, fontSize: '62px' }">
              {{ attr.days }}
            </span>
            <span style="font-size: 19px">天</span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="legend"
      :style="{ color: attr.fontColor }"
      v-if="attr.legendType"
    >
      <div class="safe">
        <span class="index" :style="{ background: activeColor }"></span>
        无事故
      </div>
      <div class="danger" style="margin-left: 16px">
        <span class="index" style="background: #ff3333"></span>
        事故
      </div>
    </div>
  </div>
</template>
<script>
import mixins from "../mixin";
export default {
  name: "tool-greenCross",
  components: {},
  mixins: [mixins],
  data() {
    return {
      datalist: [],
      activeClass: null,
      attr: {
        // 栅格
        span: {
          status: false,
          row: 1,
          column: 1,
        },
        fontColor: "#fff",
        fontSize: 20,
        backgroundColor: "#5AA55F",
        borderColor: "#409eff",
        titleShow: true,
        dateShow: true,
        dayHidden: false,
        legendType: true,
        days:66,
      },
      activeColor: "#33FF00",
      dateConfig: [
        {
          days: null,
          week: null,
        },
      ],
      legend: [
        {
          color: "#5AA55F",
          title: "无事故",
        },
        {
          color: "#a10808",
          title: "事故",
        },
      ],
      showDateYear: "",
      showDateMonth: "",
      isEdit: false,
      pageId: null, // 跳转页面 kanBanId
      pageType: false, // 是否启详情点击
      dataScourceId: null, // 数据集ID
      paramsKey: "", // 子页面参数key
      dayList: [],
    //   days: 66,
      tableData: {
        days: 66,
        dayList: [],
      },
    };
  },
  computed: {
    option() {
      this.datalist.forEach((element, index) => {
        element.flag = this.tableData.dayList[index];
      });
      return this.datalist;
    },
  },
//   watch: {
//     "tableData.days": {
//       handler(val) {
//         console.log(val,'监听');
//         this.days = val;
//         this.config.attr.forEach((ele) => {
//           if (ele.title == "安全天数") {
//             ele.data = this.days;
//           }
//         });
//       },
//     },
//   },
  pageData: {
    type: "3", // Object
    sort: 14,
    name: "tool-greenCross",
    version: 99,
    icon: "source/tool-calendar-new.svg",
    title: "绿十字",
    width: 600,
    height: 300,
    config: {
      data: {
        key: "tableData",
        type: "defaulteVal", // table || api || dataSource
        value: {
          days: 66,
          dayList: [],
        },
      },
      attr: [
        {
          key: "span",
          title: "栅格布局",
          formType: "layout-span",
          group: "basics",
          type: "Object",
          data: {
            status: false,
            row: 1,
            column: 1,
          },
        },
        {
          key: "titleShow",
          data: true,
          title: "标题显示",
          formType: "radio",
          group: "basics",
        },
        {
          key: "dateShow",
          data: true,
          title: "时间显示",
          formType: "radio",
          group: "basics",
        },
        {
          key: "dayHidden",
          data: false,
          title: "隐藏天数",
          formType: "radio",
          group: "basics",
        },
        {
          key: "legendType",
          data: true,
          title: "隐藏图例",
          formType: "radio",
          group: "basics",
        },

        {
          key: "fontColor",
          data: "#F8F7F3",
          title: "文字色",
          formType: "color-picker",
          group: "basics",
        },
        {
          key: "fontSize",
          data: 20,
          title: "字号",
          formType: "text-number",
          group: "basics",
          type: "Number",
        },
        {
          key: "borderColor",
          data: "#409eff",
          title: "边框颜色",
          formType: "color-picker",
          group: "basics",
        },
        {
          key: "days",
          data: 66,
          title: "安全天数",
          formType: "text-number",
          group: "basics",
        },
      ],
    },
  },
  created() {
    // if (this.$route.path.toUpperCase() === "/DESIGN") {
    //   this.isEdit = false;
    // } else {
    //   this.isEdit = true;
    // }

    this.datalist = Array.from({ length: 33 }, () => {
      return {};
    });
  },
  mounted() {
    this.loadDate();
    this.tableData.dayList = Array.from(
      { length: this.dateConfig.days },
      () => {
        return 0;
      }
    );
  },
  methods: {
    loadDate() {
      var now = new Date();
      var d = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      this.dateConfig.days = d.getDate();
      this.dateConfig.week = new Date().getDate();
      this.dateConfig.today = new Date().getDate();
      this.showDateYear = this.$methods.dateFormat(new Date(), 6);
      this.showDateMonth = this.$methods.dateFormat(new Date(), 7);
    },
    linkClick() {
      if (this.isEdit && this.pageId != null && this.pageId !== "") {
        let query = JSON.parse(JSON.stringify(this.$route.query));
        query.kanBanId = this.pageId;
        this.$router.push({
          path: "/pageView",
          query: query,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.outside-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.outTitle {
  margin-left: 16px;
  // width: 373px;
  color: #fff;
  text-align: center;

  .header-title {
    color: #00ffff;
    padding: 0 16px;
    width: 363px;
    margin: 0 auto;
    height: 32px;
    font-size: 29px;
    line-height: 32px;
    margin-bottom: 48px;
    text-align: center;
    background-size: contain;
    background: url("../../../assets/calendar.png");
  }

  .date-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    .item-box {
      padding: 0 6px;
      width: 50%;
      min-width: 180px;
      min-height: 140px;
    }

    .year {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }

    .year-show {
      position: absolute;
      top: 16px;
      left: -15px;
      display: inline-block;
      width: 80px;
      height: 30px;
      text-align: right;

      &:after {
        position: absolute;
        left: 64px;
        content: "";
        display: block;
        width: 45px;
        height: 2px;
        background: #33ff00;
        transform: rotate(-60deg);
      }
    }
  }
}

.outSide {
  width: 60%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #fff;

  .cell {
    width: 14.2%;
    height: 14.2%;
    text-align: center;
    font-size: 10px;
    background: rgba(32, 33, 35, 0.1);
    cursor: pointer;

    .cell-item {
      border: 0.5px solid #409eff;
      .item-title {
        font-size: 18px;
      }
    }

    div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      line-height: 100%;
      background: rgba($color: #202123, $alpha: 0.5);
    }
  }
  .cell:nth-child(3),
  .cell:nth-child(6),
  .cell:nth-child(30) {
    margin-right: 28.4%;
  }
  .cell:nth-child(1),
  .cell:nth-child(4),
  .cell:nth-child(28),
  .cell:nth-child(31) {
    margin-left: 28.4%;
  }
}
.newDate {
  width: 40%;
  height: 62px;

  .date-item {
    height: 100%;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}
.display-center {
  display: flex;
  align-items: center;
}

.legend {
  position: absolute;
  top: 6px;
  right: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .index {
    display: inline-block;
    width: 8.3px;
    height: 8.3px;
    margin-right: 2px;
  }
}
</style>
